<template>
  <tab-bar>
    <tab-bar-item path="/home" coloractive="red">
      <template #item-icon>
        <img src="../../../assets/img/tabbar/home.svg" alt="首页" >
      </template>
      <template #item-icon-active>
        <img src="../../../assets/img/tabbar/home_active.svg" alt="首页" >
      </template>
      <template #item-text>
       <div slot="item-text">首页</div>
      </template>
    </tab-bar-item>
    <tab-bar-item path="/category" coloractive="red">
      <template #item-icon>
        <img src="../../../assets/img/tabbar/category.svg" alt="分类" >
      </template>
      <template #item-icon-active>
        <img src="../../../assets/img/tabbar/category_active.svg" alt="分类" >
      </template>
      <template #item-text>
       <div slot="item-text">分类</div>
      </template>
    </tab-bar-item>
    <tab-bar-item path="/cart" coloractive="red">
      <template #item-icon>
        <img src="../../../assets/img/tabbar/shopcart.svg" alt="购物车" >
      </template>
      <template #item-icon-active>
        <img src="../../../assets/img/tabbar/shopcart_active.svg" alt="购物车" >
      </template>
      <template #item-text>
       <div slot="item-text">购物车</div>
      </template>
    </tab-bar-item>
    <tab-bar-item path="/profile" coloractive="red">
      <template #item-icon>
        <img src="../../../assets/img/tabbar/profile.svg" alt="个人" >
      </template>
      <template #item-icon-active>
        <img src="../../../assets/img/tabbar/profile_active.svg" alt="个人" >
      </template>
      <template #item-text>
       <div slot="item-text">个人</div>
      </template>
    </tab-bar-item>
  </tab-bar>
  
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import TabBar from '../../common/tabbar/TabBar.vue'
import TabBarItem from '../../common/tabbar/TabBarItem.vue'
export default {
  //import引入的组件需要注入到对象中才能使用
  name:"maintabbar",
  components: {
    TabBar,
    TabBarItem
  },
  props: {},
  data() {
  //这里存放数据
  return {
  
  };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
  
  },
}
</script>
<style scoped>

</style>